iT邦幫忙

第 11 屆 iThome 鐵人賽

DAY 4
0
Modern Web

從Stack Overflow學前端系列 第 4

從StackOverflow上學CODING(4)如何讓div或別的元素重疊

  • 分享至 

  • xImage
  •  
<div class="navi"></div>
<div id="infoi">
    <img src="info_icon2.png" height="20" width="32"/>
</div>

利用position relative/absolute在兩個div上後用z-index可以設定元素的z(立體面)

#container {
  width: 100px;
  height: 100px;
  position: relative;
}
#navi,
#infoi {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
}
#infoi {
  z-index: 10;
}
<div id="container">
  <div id="navi">a</div>
  <div id="infoi">
    <img src="https://appharbor.com/assets/images/stackoverflow-logo.png" height="20" width="32" />b
  </div>

上一篇
從StackOverflow上學CODING(3)如何置中一個div
下一篇
從StackOverflow上學CODING(5)甚麼時候用img或background-image?
系列文
從Stack Overflow學前端30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言